<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="100px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="getList" style="float:right;">搜索</el-button>
				<el-button type="text" icon="el-icon-refresh" @click="reset"
					style="float:right;margin-right:10px;">重置</el-button>
				<el-button type="text" icon="el-icon-plus" @click="editProduct" v-if="code == 'coder'">新建产品</el-button>
			</div>
			<el-form-item label="时间" prop="time">
				<el-date-picker v-model="timeModel" type="daterange" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" value-format="yyyy-MM-dd hh:mm:ss" size="small">
				</el-date-picker>
			</el-form-item>
			<!-- <el-form-item label="产品状态">
				<el-select size="small" v-model="queryParams.orderState" multiple placeholder="请选择状态" filterable
					clearable>
					<el-option v-for="item in stateList" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</el-form-item> -->
			<el-form-item label="产品名称">
				<el-input v-model="queryParams.productName" placeholder="产品名称" clearable size="small"
					@keyup.enter.native="getList" />
			</el-form-item>
		</el-form>

		<el-table v-loading="loading" :data="list" border height="calc(100vh - 320px)">
			<el-table-column label="产品编号" align="center" prop="productNo" fixed="left" width="200"></el-table-column>
			<!-- <el-table-column label="状态" align="center" prop="status"></el-table-column> -->
			<el-table-column label="产品名称" align="center" prop="productName" width="200"></el-table-column>
			<el-table-column label="负责人" align="center" prop="productUserName"></el-table-column>
			<!-- <el-table-column label="创建人" align="center" prop="createUser"></el-table-column> -->
			<el-table-column label="创建时间" align="center" prop="createTime"></el-table-column>
			<el-table-column label="操作" align="center" width="150" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" size="mini" class="editBtn" @click="editProduct(scope.row)"
						v-if="code == 'coder'">
						编辑
					</el-button>
					<el-button type="text" size="mini" class="deleteBtn" @click="delProduct(scope.row)"
						v-if="code == 'coder'">
						删除
					</el-button>
					<el-button type="text" size="mini" class="detailBtn" @click="lookProduct(scope.row)">
						详情
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />

		<!-- 产品维护弹窗 -->
		<el-dialog title="产品维护" :visible.sync="productModel" :close-on-click-modal="false"
			:close-on-press-escape="false" width="60%">
			<el-form ref="productForm" :model="productForm" label-width="100px" :rules="rules">
				<el-row>
					<el-col :span="12">
						<el-form-item label="产品名称" prop="productName">
							<el-input v-model="productForm.productName" placeholder="请输入产品名称"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="产品负责人" prop="productUser">
							<el-select filterable v-model="productForm.productUser">
								<el-option :value="item.id" :label="item.name" v-for="item in userList"></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item label="产品描述" prop="productDesc">
					<el-input type="textarea" v-model="productForm.productDesc" placeholder="请输入描述" maxlength="1000"
						show-word-limit></el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="productModel = false">取 消</el-button>
				<el-button type="primary" @click="submitProduct()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 详情 -->
		<el-dialog title="详情" :visible.sync="detailModel" :close-on-click-modal="false" :close-on-press-escape="false"
			width="60%">
			<el-form ref="detailForm" :model="detailForm" label-width="100px" :inline="true" class="detailForm">
				<el-row>
					<el-col :span="12">
						<el-form-item label="产品名称:">
							{{detailForm.productName}}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="产品编号:">
							{{detailForm.productNo}}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="负责人:">
							{{detailForm.productUserName}}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="创建时间:">
							{{detailForm.createTime}}
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="产品描述:">
							{{detailForm.productDesc}}
						</el-form-item>
					</el-col>
				</el-row>
				<!-- <el-row>
					<el-col :span="24">
						<el-form-item label="文件附件:">
							<el-upload :action="fileUrl" :headers="fileHeaders" :show-file-list="false" :file-list="fileList"
								:on-success="handleAvatarSuccess" :on-error="handleAvatarError" multiple :limit="10000">
								<el-button type="primary" size="mini" style="margin:20px;">新建文档</el-button>
							</el-upload>
						</el-form-item>
					</el-col>
				</el-row> -->
				<!-- <el-row>
					<el-col :span="24">
						<el-table v-loading="loading" :data="list" border height="400">
							<el-table-column label="文件名称" align="center" prop="orderNo" width="600"></el-table-column>
							<el-table-column label="上传人" align="center" prop="manager"></el-table-column>
							<el-table-column label="操作" align="center" width="150" fixed="right">
								<template slot-scope="scope">
									<el-button type="text" size="mini" class="editBtn">
										下载
									</el-button>
									<el-button type="text" size="mini" class="deleteBtn">
										删除
									</el-button>
								</template>
							</el-table-column>
						</el-table>
					</el-col>
				</el-row> -->
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="detailModel = false">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		selProductList,
		insertProduct,
		updateProduct,
		delProduct,
		selectUser,
		selUserList,
		insertProjectFile,
		selProjectFile,
		delProjectFile
	} from '@/api/workOrder.js'
	// 上传文件
	import fileUpdata from '@/api/file.config'
	export default {
		name: "product",
		// 页面数据
		data() {
			return {
				queryParams: {
					pageNum: 1, // 显示第一页数据
					pageSize: 10, //每页显示十条
					startTime: "",
					endTime: "",
					productName: "",
				},
				productForm: {
					productName: '',
					productUser: '',
					productDesc: '',
					code: '',
					describe: ''
				},
				detailForm: {
					productForm: '',
					productUser: '',
					describe: ''
				},
				stateList: [{
						label: '待审批',
						value: 1
					},
					{
						label: '待确认',
						value: 2
					},
					{
						label: '待开发',
						value: 3
					},
					{
						label: '开发中',
						value: 4
					},
					{
						label: '待验收',
						value: 5
					},
					{
						label: '已完成',
						value: 6
					}
				],
				loading: false,
				list: [],
				total: 0, // 一共多少条数据
				timeModel: [],
				productModel: false,
				detailModel: false,
				rules: {
					productName: [{
						required: true,
						message: "请您输入产品名称",
						trigger: "blur"
					}, ],
					productUser: [{
						required: true,
						message: "请选择负责人",
						trigger: "change"
					}],
				},
				userList: [],
				fileHeaders: fileUpdata.headers(),
				fileUrl: process.env.VUE_APP_BASE_API + `/vapi/file/uploadfile?objectName=workOrder`,
				fileInfo: '',
				fileList: [],
				code: ''
			};
		},
		// 初始化
		mounted() {
			this.getList();
			this.selectUser();
			this.selUserList();
		},
		// 函数集合
		methods: {
			selUserList() {
				selUserList({
					id: localStorage.getItem("userId")
				}).then(res => {
					this.code = res.rows[0].code
				})
			},
			// 查询项目文档
			selProjectFile() {
				var that = this;
				selProjectFile().then(res => {
					that.fileList = res.rows;
				})
			},
			// 下载文件
			downLoadProjectFile(row) {
				this.getBlob(row.filePath, (blob) => {
					this.saveAs(blob, row.fileName)
				})
			},
			getBlob(url, cb) {
				var xhr = new XMLHttpRequest;
				xhr.open('GET', url, true);
				xhr.responseType = 'blob';
				xhr.onload = function() {
					if (xhr.status == 200) {
						cb(xhr.response)
					}
				}
				xhr.send();
			},
			saveAs(blob, fileName) {
				if (window.navigator.msSaveOrOpenBlob) {
					navigator.msSaveBlob(blob, fileName)
				} else {
					const link = document.createElement('a')
					const body = document.querySelector('body')
					link.href = window.URL.createObjectURL(blob)
					link.download = fileName
					link.style.display = 'none'
					body.appendChild(link)
					link.click()
					body.removeChild(link)
					window.URL.revokeObjectURL(link.href)
				}
			},
			// 删除文件
			deleteProjectFile(row) {
				var that = this;
				that.$confirm('是否删除项目文档?', '温馨提示', {
					confirmButtonText: '是',
					cancelButtonText: '否',
					type: 'warning'
				}).then(() => {
					delProjectFile({
						id: row.id
					}).then(res => {
						if (res == 1) {
							that.$message.success("文档删除成功")
							that.selProjectFile();
						} else {
							that.$message.error("文档删除失败")
						}
					}).catch(err => {
						that.$message.error("文档删除失败")
					})
				}).catch(() => {

				})

			},
			handleExceed(files, fileList) {
				this.$message.warning(`最多可上传 1 个附件，您已超限`)
			},
			handleAvatarSuccess(res, file, fileList, type) {
				var that = this;
				that.fileInfo = file;
				// that.fileList.push(file)
				// 在这里已经上传了，执行插入文档操作
				insertProjectFile({
					projectNo: that.detailForm.projectNo,
					filePath: res.data,
					fileName: file.name,
					fileType: "DOC"
				}).then(res => {
					if (res == 1) {
						that.selProjectFile();
						that.$message.success("文档上传成功")
					}
				})
			},
			handleAvatarError(res, file) {
				this.$message.error("文件上传失败，请重试")
			},
			//查询用户信息
			selectUser() {
				selectUser({
					code: 'coder'
				}).then(res => {
					if (res.code == 200) {
						this.userList = res.rows;
					}
				})
			},
			// 修改产品
			editProduct(row) {
				var type = "";
				if (row.id) {
					// 修改
					type = "edit";
					this.productForm = row;
				} else {
					// 新增
					type = "add";
					this.productForm = {};
				}
				this.dealType = type;
				this.productModel = true;
			},
			// 查看产品详情
			lookProduct(row) {
				this.detailForm = row;
				this.detailModel = true;
				// this.selProjectFile();
			},
			// 删除产品
			delProduct(row) {
				var that = this;
				this.$confirm('是否删除该条产品?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					delProduct({
						id: row.id
					}).then(res => {
						if (res.code == 200) {
							this.$message.success(res.msg);
							that.getList();
						} else {
							this.$message.error(res.msg);
						}
					})
				}).catch(() => {

				})
			},
			//提交产品
			submitProduct() {
				this.$refs["productForm"].validate((valid) => {
					if (valid) {
						debugger
						if (this.productForm.id) {
							// 修改
							updateProduct({
								...this.productForm
							}).then(res => {
								if (res == 1) {
									this.$message.success("产品更新成功");
									this.getList();
									this.productModel = false;
								} else {
									this.$message.success("产品更新失败");
								}
							})
						} else {
							// 新增
							insertProduct({
								...this.productForm
							}).then(res => {
								if (res == 1) {
									this.$message.success("产品新增成功");
									this.getList();
									this.productModel = false;
								} else {
									this.$message.success("产品新增失败");
								}
							})
						}
					}
				});
			},
			//初始化列表
			getList() {
				this.loading = true;
				if (this.timeModel && this.timeModel.length > 0) {
					this.queryParams.startTime = this.timeModel[0];
					this.queryParams.endTime = this.timeModel[1];
				}
				selProductList({
					...this.queryParams
				}).then(res => {
					this.list = res.rows
					this.total = res.total
					this.loading = false;
				})

			},
			reset() {
				this.queryParams = {
					pageNum: 1,
					pageSize: 10
				}
			},

		}
	}
</script>
<style scoped lang='scss'>
	.editBtn span {
		color: red;
	}

	.deleteBtn span {
		color: red;
	}

	.detailBtn span {
		color: red;
	}

	.el-date-editor.el-input,
	.el-date-editor.el-input__inner {
		width: 100%;
	}

	.detailForm {
		.el-form-item {
			margin-bottom: 0px;
		}
	}
</style>